<template>
	<transition name="popup-slide-up">
		<div class="ebook-popup-wrapper" v-show="fontFamilyVisible">
			<div class="ebook-popup-title">
				<div @click="hideEbookpopup" class="ebook-popup-title-icon">
					<span class="icon-down2"></span>
				</div>
				<span class="ebook-popup-title-text">
					{{$t('book.selectFont')}}
				</span>
			</div>
			<div class="ebook-popup-list-wrapper">
				<div @click="selectSystemSetFontFamily(item)" class="ebook-popup-list-item" :style="handleTextFontfamilyStyle(item)"
				v-for="item in fontFamilyList" :key="item.font">
					<div class="ebook-popup-item-text" :class="{'selected': isFontFamilySelected(item)}">
						{{item.font}}
					</div>
					<div class="ebook-popup-item-flag">
						<span v-show="isFontFamilySelected(item)" class="icon-check"></span>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import {
		ebookMixin
	} from '../../utils/mixin.js';
	import {
		setBookObjectProperty
	} from '../../utils/localstorage.js';
	import {
		DEFAULT_FONT_FAMILY,
		FONT_FAMILY
	} from '../../utils/bookStaticData';
	export default {
		name: 'ebookPopupWrapper',
		mixins: [ebookMixin],
		data() {
			return {
				fontFamilyList: FONT_FAMILY
			}
		},

		computed: {

		},
		methods: {
			/**
			 * 处理字体字体 样式 -- 对应其字体
			 * @param {Object} item 字体对象
			 */
			handleTextFontfamilyStyle(item) {
				return {
					fontFamily: item.font
				}
			},

			/**
			 * 是否为选中字体
			 * @param {Object} item 字体对象
			 */
			isFontFamilySelected(item) {
				return item.font === this.defaultFontFamily
			},
			/**
			 * 选择为当前字体为系统设置字体
			 * @param {Object} item 字体对象
			 */
			selectSystemSetFontFamily(item) {

				this.setdefaultFontFamily({
					defaultFontFamily: item.font
				})
				if (item.font === 'Default') {
					this.currentBook.rendition.themes.font(DEFAULT_FONT_FAMILY)
				} else {
					this.currentBook.rendition.themes.font(item.font)
				}
				// 设置  字体缓存
				setBookObjectProperty(this.fileName, 'defaultFontFamily', this.defaultFontFamily)
			},

			// 隐藏字体设置pop
			hideEbookpopup() {
				this.setfontFamilyVisible({
					fontFamilyVisible: false
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';

	.ebook-popup-wrapper {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 300;
		width: 100%;
		box-sizing: border-box;
		padding: pxTorem(20);
		padding-top: pxTorem(10);
		box-shadow: 0 pxTorem(-4) pxTorem(6) rgba(0, 0, 0, .1);
		background: #fff;

		.ebook-popup-title {
			@include flexCenter;
			width: 100%;
			position: relative;
			height: 40px;

			.ebook-popup-title-icon {
				@include flexYcenter;
				position: absolute;
				font-weight: bold;
				left: 0px;
				font-size: pxTorem(20);
			}

			.ebook-popup-title-text {
				font-weight: bold;
				font-size: pxTorem(16);
				text-align: center;
			}
		}

		.ebook-popup-list-wrapper {
			.ebook-popup-list-item {
				@include flexYcenter;
				padding: pxTorem(12) 0;
				font-size: pxTorem(15);
				min-height: pxTorem(41);
				box-sizing: border-box;

				.ebook-popup-item-text {
					flex: 1;

					&.selected {
						color: #E36C38;
					}
				}

				.ebook-popup-item-flag {
					flex: 1;
					text-align: right;

					.icon-check {
						margin-right: pxTorem(8);
						color: #E36C38;
					}
				}
			}
		}
	}
</style>
